<!-- 传输完成页面 -->
<template>
  <div class="successTransfer" v-if="fileList && fileList.length > 0">
    <div class="tabHander">
      <a-space size="middle">
        <!-- <span>共传输完成 <a style="font-weight: 500;">{{ fileSuccessNum }}</a> 个文件</span> -->
        <span>共传输成功 <a style="font-weight: 500;">{{ fileSuccessNum }}</a> 个文件</span>
        <span>传输失败 <a style="font-weight: 500; color: red;">{{ fileFailNum }}</a> 个文件</span>
      </a-space>
      <a-button size="small" type="primary" @click="delAll">
        <span style="font-size: 12px; display: flex; align-items: center;">清除全部记录</span>
      </a-button>
    </div>
    <a-table rowKey="projectJobId" :columns="columns" :data-source="fileList" :show-header="false" :pagination="false"
      class="ks-table">
      <template #bodyCell="{ column, index, record, text }">
        <template v-if="column.dataIndex === 'index'">
          <span>
            {{ index + 1 }}
          </span>
        </template>
        <template v-if="column.dataIndex === 'time'">
          <span class="textColor">
            {{ record.time }}
          </span>
        </template>
        <template v-if="column.dataIndex === 'state'">
          <div>
            <!-- <img src="@/assets/images/down-success.png"> -->
            <span class="textColor">{{ downloadState(text, record) }}</span>
          </div>
          <!-- <div v-if="record.state === 2">
            <img src="@/assets/images/up-success.png">
            <span class="textColor">{{ '上传完成' }}</span>
          </div> -->
        </template>
        <template v-if="column.dataIndex === 'errMsg'">
          <div>
            <span class="textColor">{{ text }}</span>
          </div>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <div class="actionSty">
            <!-- 打开文件 -->
            <a-tooltip placement="bottom" color="#666">
              <template #title>
                <span style="font-size: 12px;">打开文件</span>
              </template>
              <file-outlined @click="openFile(record)" />
            </a-tooltip>
            <!-- 打开所属文件夹 -->
            <a-tooltip placement="bottom" color="#666">
              <template #title>
                <span style="font-size: 12px;">打开所在文件夹</span>
              </template>
              <folder-outlined @click="openFileInFolder(record)" />
            </a-tooltip>
            <!-- 重新下载 -->
            <a-tooltip placement="bottom" color="#666" v-if="isReDownload(record)">
              <template #title>
                <span style="font-size: 12px;">重新下载</span>
              </template>
              <cloud-download-outlined @click="downloadFile(record)" class="icon" />
            </a-tooltip>
            <!-- 删除 -->
            <!-- <a-tooltip placement="bottom" color="#666">
              <template #title>
                <span style="font-size: 12px;">清除记录</span>
              </template>
              <delete-outlined />
            </a-tooltip> -->
          </div>
        </template>
      </template>
    </a-table>
  </div>
  <!-- 没有传输任务 -->
  <div class="empty" v-else>
    <div class="centerfile">
      <img src="@/assets/images/empty-file.png" style="width: 200px;">
      <p>当前没有传输记录喔~</p>
    </div>
  </div>
</template>
<script>
// DeleteOutlined, , CloudDownloadOutlined
import { FileOutlined, FolderOutlined, CloudDownloadOutlined } from '@ant-design/icons-vue'
import { message } from "ant-design-vue"
export default {
  name: 'successTransfer',
  components: {
    FileOutlined,
    FolderOutlined,
    CloudDownloadOutlined
  },
  data() {
    return {
      columns: [
        // {
        //   dataIndex: "index",
        //   width: 70,
        //   align: "center",
        //   resizable: true,
        // },
        {
          dataIndex: 'fileName',
          width: 200,
        },
        // {
        //   dataIndex: 'time',
        //   width: 100,
        //   align: "center",
        // },
        {
          dataIndex: 'state',
          width: 100,
          align: "center",
        },
        {
          dataIndex: 'errMsg',
          width: 100,
          align: "center",
        },
        {
          dataIndex: 'action',
          width: 70,
          align: "center",
        },
      ],
      fileList: [],
      fileSuccessNum: 0, // 传输成功数量
      fileFailNum: 0, // 传输失败数量
    }
  },
  methods: {
    // 判断是否可以重新下载
    isReDownload(record) {
      return record.children && record.children.length > 0 && record.children.some(item => item.state !== 4)
    },
    // 重新下载
    async downloadFile(record) {
      // 1. 寻找项目信息(下载项父元素)
      const dataList = {
        fileName: record.fileName,
        projectJobId: record.projectJobId,
        savePath: record.savePath,
        filePath: record.filePath,
        isReDownload: true,
        children: []
      }
      // 2. 重新下载的文件
      const downloadFiles = record.children.map(item => {
        if (item.state === 4) return // 如果状态码为 4，则是已完成
        const obj = {
          id: item.id,
          url: item.url,
          fileName: item.fileName,
          fileSize: item.fileSize,
          projectJobId: item.projectJobId,
          isReDownload: true, // 代表这是断点下载的数据
          filePath: item.filePath,
          total: item.total
        }
        return obj
      }).filter(Boolean)
      dataList.children = downloadFiles
      console.log('dataList', dataList)
      // 3. 重新保存数据
      await window.versions.redownloadStore(dataList)
      // 4. 下载文件
      const res = await window.versions.downLoadFile(dataList)
      console.log('res', res)
      // 5. 重新获取列表
      this.getList()
      message.success("开始下载")
    },
    // 下载状态
    downloadState(text, record) {
      let stateStr = null
      if (text === 4 || record.children) {
        stateStr = "已完成";
      } else {
        stateStr = "已失败";
      }
      return stateStr
    },
    // 打开文件
    async openFile(record) {
      const res = await window.versions.openFile(record.filePath)
      if (!res) message.warning("文件不存在，请下载文件")
    },
    // 打开所在文件夹
    async openFileInFolder(record) {
      const res = await window.versions.openFileInFolder(record.filePath)
      if (!res) message.warning("文件不存在，请下载文件")
    },
    // 清空全部记录
    async delAll() {
      await window.versions.clearTransferList()
      this.getList()
    },
    // 获取传输列表
    async getList() {
      const res = await window.versions.getTransferList()
      console.log('this.fileList', res)
      this.fileList = res
      const { success, fail } = this.fileNumFn(res)
      this.fileSuccessNum = success
      this.fileFailNum = fail
    },
    // 实时获取传输列表
    realGetList() {
      window.versions.realTransferList((res) => {
        console.log('this.fileList', res)
        this.fileList = res
        const { success, fail } = this.fileNumFn(res)
        this.fileSuccessNum = success
        this.fileFailNum = fail
      })
    },
    // 共传输完成文件
    fileNumFn(res) {
      let success = 0
      let fail = 0
      res?.map(item => {
        if (item.children && item.children.length > 0) {
          success += item.children.filter(item => item.state == 4).length
          fail += item.children.filter(item => item.state && item.state !== 4).length
        }
      })
      return { success, fail }
    }
  },
  created() {
    this.getList()
    this.realGetList()
  },
  beforeUnmount() {
    window.versions.unmountTransferList()
  }
}
</script>

<style lang="scss" scoped>
.ks-table>img {
  height: 16px
}

.icon {
  font-size: 14px;
}
</style>